<template>
  <div id="cornerComment" v-if="dialogVisible">
    <div class="cornerComment-in" ref="dialogBox">
      <div class="cornerComment-in-title">
        <span>我的评论/我的点赞</span>
        <span class="el-icon-circle-close close-Btn-line" @click="closePOpup"></span>
      </div>
      <div class="commentBody">
        <div class="centent-commont">
          <div class="centent-commont-bottom">
            <p class="centent-commont-bottom-title">
              <span>全部{{ tabline == 1 ? '评论' : '点赞' }}({{ page.total }})</span>
              <span class="tabline">
                  <span :class="tabline==1?'activecommnt':''" @click="tabChange(1)">评论</span>
                  <span :class="tabline==2?'activecommnt':''" @click="tabChange(2)">点赞</span>
                </span>
            </p>
            <div class="centent-commont-body" v-if="arryList.length">
              <div v-for="(item,index) in arryList">
                <div class="centent-commont-list" v-if="tabline==1">
                  <img src="@/assets/imageAdmin/logo.jpg" alt="" class="centent-commont-list-userimg"
                       v-if="pageOption.type==1">
                  <div class="centent-commont-list-right">
                    <div class="centent-commont-name">
                      <span class="centent-commont-nameuser"
                            v-if="pageOption.type==1">{{ item.user ? item.user.realname : '匿名' }}</span>
                      <p class="centent-commont-name-article">
                        {{ pageOption.type == 1 ? '评论了你的文章' : '评论了文章' }}
                        <span class="articlename"
                              @click="commentDetail(item.postings.id)">《{{ item.postings.title }}》</span>
                      </p>
                      <span class="centent-commont-time">{{ item.create_time }}</span>
                    </div>
                    <p class="centent-commont-word">{{ item.content }}</p>
                  </div>
                </div>
                <div class="centent-commont-list" v-if="tabline==2">
                  <img src="@/assets/imageAdmin/logo.jpg" alt="" class="centent-commont-list-userimg"
                       v-if="pageOption.type==1">
                  <div class="centent-commont-list-right laudlist">
                    <div class="centent-commont-name">
                      <span class="centent-commont-nameuser"
                            v-if="pageOption.type==1">{{ item.user ? item.user.realname : '匿名' }}</span>
                      <p class="centent-commont-name-article">
                        {{ pageOption.type == 1 ? '点赞了你的文章' : '点赞了文章' }}
                        <span class="articlename"
                              @click="commentDetail(item.postings.id)">《{{ item.postings.title }}》</span>
                      </p>
                      <span class="centent-commont-time">{{ item.create_time }}</span>
                    </div>
                  </div>
                </div>
              </div>
              <el-col :span="24" style="text-align: center">
                <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="page.total"
                    :page-size="page.pagesize"
                    @current-change="handleSizeChange">
                </el-pagination>
              </el-col>
            </div>
            <div class="centent-commont-body" v-else>
              暂无数据
            </div>
          </div>
        </div>
      </div>
      <div class="cornerComment-in-footer">
        <el-button @click="closePOpup" size="small">返回</el-button>
      </div>
    </div>
    <forumDetail :visible.sync="detailVisible" :detailId="detailId" detailType="1"></forumDetail>
  </div>
</template>

<script>
import {pagination, tableoption} from '@/utils/util.js'
import forumDetail from "./forumDetail";
import {mapGetters} from "vuex";

export default {
  props: ['visible', 'landType'], // commoent 学生点评 collection 学生采集
  components: {
    forumDetail
  },
  data() {
    return {
      detailVisible: false,
      detailId: 0,
      dialogVisible: false,
      tabline: 1,
      userInfomation: null,
      pageOption: this.$route.query,
      title: '',
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      arryList: [],
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if(this.visible){
        this.InitFn();
        this.tabline = this.landType;
      }
    }
  },
  created() {
  },
  methods: {
    async cateFn() {
      let data = await this.$fetch(this.api.forum_plate_index, {p: 1, user_id: this.userInfo.id});
      console.log('获取的内容：', data)
      this.typeList = data.list.data
    },
    InitFn() {
      // type 1我的消息 2我的评论
      // 我的消息  postings_user  用户id; 我的评论 user_id  用户id
      // forum_laud_index
      let data = {p: this.page.pageindex}
      let url_ = this.api.forum_comment_index
      console.log('d:', this.pageOption.type, this.pageOption)
      // 1 '我的消息' 2 '我的评论'
      if (Number(this.landType) === 1) {
        data.postings_user = this.userInfo.id
      } else {
        data.user_id = this.userInfo.id
      }
      if (this.tabline === 2) {
        url_ = this.api.forum_laud_index
      }
      this.$fetch(url_, data).then((response) => {
        if (response.code === 0) {
          this.arryList = response.list.data
          this.page.total = response.list.total
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    },
    tabChange(option) {
      this.arryList = []
      this.tabline = option
      this.page.pageindex = 1
      this.InitFn()
    },
    goBack() {
      this.$router.go(-1)
    },
    commentDetail(id) {
      // this.$router.push('/forumdetail')
      this.detailId= id
      this.detailVisible = true
      // this.$router.push('/forumdetail?type=1&id=' + id)
    },
    // 关闭弹窗
    closePOpup() {
      this.$emit('update:visible', false)
    },
    getJson(option) {
      return JSON.parse(JSON.stringify(option))
    }
  },
  mounted() {
  }
}
</script>
<style scoped>
#cornerComment {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.cornerComment-in {
  width: 80%;
  height: 70%;
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}

.cornerComment-in-title {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
}

.cornerComment-in-title span {
  padding: 0 10px;
}

.cornerComment-in-title span:first-child {
  flex: 1;
  font-size: 16px;
}

.cornerComment-in-footer {
  height: 50px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
}

.commentBody {
  padding: 10px;
  flex: 1;
  overflow-y: auto;
}

.close-Btn-line {
  cursor: pointer;
}

.hearder-search {
  display: flex;
  align-items: center;
}
</style>


